<template>
  <div class="content-page">
    <searchHeader :bg="bg" isHome="true"/>
    <tabBox ref="tabBox" v-if="channels.length" :tabs="channels" @selectTab="handleSelect" />
    <div class="page-position">
      <div class="item-content" v-if="article" >
        当前位置：首页>{{ article.channelName }}
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb> -->
      </div>
    </div>
    <el-container class="item-content" v-if="article">
      <el-main class="">
        <el-card class="">
          <div class="notice-title px-2 py-3">
            <div>
              <h2>{{article.title}}</h2>
              <span>{{article.publishDate}}</span>
            </div>
            <div>
              <span class="hover-pontiner" @click="handlePrint">打印</span>
              <span class="hover-pontiner" @click="handleCollect">收藏</span>
            </div>
          </div>
          <ul class="py-5 px-2 notice-info h4">
            <li>
              <span>招标编号</span><span>联系人</span><span>所属地区</span>
            </li>
            <li><span class="link-a">升级查看</span><span class="link-a">升级查看</span><span></span></li>
            <li>
              <span>采购业主</span><span>联系电话</span><span>发布日期</span>
            </li>
            <li>
              <span class="link-a">升级查看</span><span class="link-a">升级查看</span><span>2020.0817</span>
            </li>
            <li>
              <span>招标公司</span><span>通讯地址</span><span>截至日期</span>
            </li>
            <li>
              <span class="link-a">升级查看</span><span class="link-a">升级查看</span><span class="link-a">升级查看</span>
            </li>
          </ul>
          <ul class="pb-3 px-2 pb-5 notice-tips h4">
            <li>
              <p>
                以上内容，仅对标准会员及以上开放，查看 <span>[服务列表]</span>
              </p>
              <p>
                如需看看详细内容，请拨打免费咨询电话：<span class="underline"
                  >400-100-22333</span
                >&nbsp;与客服专员联系
              </p>
            </li>
            <li><el-button class="h2">立即升级</el-button></li>
          </ul>
          <div class="py-3 px-2 pb-12">
            <h2 class="h1 pb-3">内容该要</h2>
            <p class="h4 article-info">
              {{article.contentText}}
            </p>
          </div>
        </el-card>
      </el-main>
      <el-aside width="400px">
        <boxCard class="mb-3" title="会员登录" type="none" :more="false" :list="boxList">
          <el-form
            label-position="left"
            label-width="60px"
            :model="formLogin"
          >
            <el-form-item label="用户名" class="mt-2">
              <el-input v-model="formLogin.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formLogin.pasword"></el-input>
            </el-form-item>
            <el-form-item label-width="0">
              <el-row type="flex" justify="center" align="middle">
                <el-button class="login-btn" @click="hanldelogin">登录</el-button>
                <el-button class="register-btn" @click="hanldeRegister">注册</el-button>
              </el-row>
            </el-form-item>
          </el-form>
        </boxCard>
        <boxCard
          v-if="attachments.length"
          title="附件下载"
          type="download"
          :more="false"
          :list="attachments"
        />

        <div class="imgs mt-3">
          <img class="img-item" src="" alt="" />
          <img class="img-item" src="" alt="" />
          <img class="img-item" src="" alt="" />
          <img class="img-item" src="" alt="" />
        </div>
        <boxCard title="推荐公告" :list="boxList" />
      </el-aside>
    </el-container>
  </div>
</template>
<script scoped>
import boxCard from "./components/card-box";
import tabBox from "./components/tab";
import HomeTitle from "@/components/HomeTitle.vue";
import searchHeader from "@/components/searchHeader.vue";
import { getArea, collectDoc, getAticleType, getDocDetail } from "@/api/api.js";

export default {
  data() {
    return {
      formLogin: {
        userName: '',
        pasword: ''
      },
      activeIndex: "",
      channelId: '',
      channels: [],
      serachStr: "",
      article: null,
      boxList: [],
      bg: false,
      docId: '',
      userGroup: null
    };
  },
  components: {
    searchHeader,
    boxCard,
    HomeTitle,
    tabBox,
  },
  computed: {
    attachments() {
      if(this.article && this.article.attachment){
        return this.article.attachment.split(',')
      } else {
        return []
      }
    }
  },
  mounted() {
    this.docId = this.$route.params.id
    this.loadAticleType();
    this.loadDocDetail()
  },
  methods: {
    hanldeRegister() {},
    hanldelogin() {},
    async handleCollect(){
      let reqParams = {
        "bidId": this.docId,
        "channelId": this.activeIndex,
        "createDate": this.article.createDate,
        "id": this.docId,
        "title": this.article.title,
        "userId": 0
      }
      let res = await collectDoc(reqParams).catch(err => {
        this.$message.error('接口报错')
      })
      console.log('收藏：', res)
    },
    handlePrint() {},
    handleRegister() {},
    handleLogin() {},
    async loadDocDetail() {
      let {doc = null, userGroup = null} = await getDocDetail({id: this.docId})

      this.article = doc
      this.userGroup = userGroup
      this.$refs['tabBox'].handleSelect(doc.channelId + '')
      console.log(doc)
    },
    async loadAticleType() {
      let { list } = await getAticleType();
      this.activeIndex = list[0].channelId + "";
      this.channels = list.map((item) => {
        item.channelId = item.channelId + "";
        return item;
      });
      // console.log(res)
    },
    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
$bg-grey: #eaeaea;
$bg_theme: #3582b7;
.page-position {
  font-weight: 16px;
  height: 40px;
  line-height: 40px;
}
.el-main {
  padding-top: 0;
  padding-left: 0px;
}
.img-item {
  width: 400px;
  height: 94px;
  border: 1px solid #ff5566;
  box-sizing: border-box;
  margin-bottom: 10px;
}
::v-deep .el-card {
  padding: 0px;
}
::v-deep .el-card__body {
  padding: 0;
}
.notice-title {
  box-sizing: border-box;
  height: 106px;
  background: $bg-grey;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    height: 100%;
    display: flex;
    &:nth-child(1) {
      width: 624px;

      flex-direction: column;
      justify-content: space-between;
      h2 {
        font-size: 20px;
        color: #333;
        font-weight: 500;
      }
      span {
        font-size: 12px;
      }
    }
    &:nth-child(2) {
      align-items: flex-end;
      font-size: 12px;
      span:nth-child(1) {
        margin-right: 13px;
      }
    }
  }
}
.notice-info {
  display: flex;
  li {
    display: flex;
    flex-direction: column;
    text-align: center;
    span {
      display: block;
      padding: 10px 0px;
    }
    &:nth-child(odd) {
      width: 85px;
      background: $bg-grey;
    }
    &:nth-child(even) {
      flex: 1;
      background: #f8f8f8;
    }
  }
}
.notice-tips {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed $bg-grey;

  li {
    span {
      color: #a60f0e;
      font-weight: 500;
      cursor: pointer;
    }
  }
  .underline {
    text-decoration-line: underline;
  }
  .el-button {
    background: #a60f0e;
    color: #fff;
  }
}
.article-info {
  line-height: 24px;
}
.login-btn{
  width: 116px;
  height: 30px;
  border-radius: 3px;

  background: $bg_theme;
  color: #fff;
}
.register-btn{
  width: 116px;
  height: 30px;
  background: linear-gradient(0deg, #F0BE57, #E0AC56);
  border-radius: 3px;
  color: #fff;

}
li{
  list-style: none;
}
.link-a{
  color: #3582B7;
  cursor: pointer;
}
</style>